<template>
  <div>
    <s-table ref="tableRef" api="setting/lang_country/list" addText="添加语言地区" @add="add" :querys="querys">
      <vxe-table-column title="编号" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="浏览器语言识别码" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="语言说明" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="关联语言" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.link_lang }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <a @click="edit(scope.row)">编辑</a>
          <el-divider direction="vertical"></el-divider>
          <a @click="del(scope.row, '删除地区语言', scope.$index)">删除</a>
        </template>
      </vxe-table-column>
    </s-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      querys: [
        {
          title: '搜索：',
          field: 'keyword',
          props: {
            clearable: true,
            placeholder: '请输入语言Code'
          }
        }
      ]
    }
  },
  methods: {
    // 添加
    add() {
      this.$modalForm(
        this.$request({
          url: `setting/lang_country/form/0`,
        }),
      ).then(() => this.$refs.tableRef.refresh(true));
    },
    edit(row) {
      this.$modalForm(this.$request({
          url: `setting/lang_country/form/${row.id}`,
        })).then(() => this.$refs.tableRef.refresh(false));
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `setting/lang_country/del/${row.id}`,
        method: 'DELETE',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$message.success(res.msg);
          this.$refs.tableRef.refresh(false)
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
  },
};
</script>
